<!doctype html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>徽章</title>
    <link rel="stylesheet" type="text/css" href="../../css/api.css"/>
    <link rel="stylesheet" type="text/css" href="../../css/style.css"/>
    <link rel="stylesheet" type="text/css" href="../../css/common.css"/>
    <link rel="stylesheet" type="text/css" href="../../css/member.css"/>
    <script type="text/javascript" src="../../script/jquery-1.9.1.min.js"></script>
    <script type="text/javascript" src="../../script/mobile.js"></script>
    <script type="text/javascript">
        window['adaptive'].desinWidth = 750;
        window['adaptive'].baseFont = 28;
        window['adaptive'].maxWidth = 750;
        window['adaptive'].init();
    </script>
</head>

<body>
<div id="header" style="height: 0.9rem; background: #fff; position: fixed; top: 0;left: 0; width: 100%; z-index: 99">
    <header class="header header-shadow">
        <div class="header-left">
            <div tapmode onclick="comeBack();" class="nav-left"><img class="icon-back" src="../../icon/icon-back.png"/>
            </div>
        </div>
        <h2>选择徽章</h2>
    </header>
</div>

<div class="mescroll" id="mescroll" style="padding-top: 1.5rem; padding-bottom: 1.5rem">
    <section class="html_section pr30 pl30 pb140">
        <ul class="hz_list">
            <!--<li>-->
            <!--<div class="c-666 f30 line_center"><img class="icon-hz mr20" src="../../icon/icon-hz01.png"/>足球徽章</div>-->
            <!--<div class="mt50 c-999">关注足球圈7天获取。徽章，简言之就是佩带在身上用来表示身份、职业、荣誉的标志。它有着悠久的历史，起源最早可以追溯到原始社会氏族部落的图腾标志。</div>-->
            <!--</li>-->
            <!--<li>-->
            <!--<div class="c-666 f30 line_center"><img class="icon-hz mr20" src="../../icon/icon-hz02.png"/>游戏徽章</div>-->
            <!--<div class="mt50 c-999">关注游戏圈7天获取。徽章，简言之就是佩带在身上用来表示身份、职业荣誉的标志。</div>-->
            <!--</li>-->
        </ul>
    </section>
</div>

</body>

</html>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/common.js"></script>
<script type="text/javascript">
    var page = 1;//页码
    var pullFlag = false;
    apiready = function () {
        setFixStatusBar(); //设置状态栏
        pop.loading();
        keybackListener()
        getBadge();


        //上拉加载
        pullUpLoading(function () {
            if(pullFlag == true){
                getBadge()
            }
        });
    }

    function getBadge(reload) {
        var param = {
            token: $api.getStorage('token'),
            type: 2,//类型：1查询自己所获得的徽章 2为所有徽章
            page: page
        }
        getAjax(Interface.get_badge, param, function (res) {
            var list = res.data.list;
            var listHtml = '';
            if (isDefine(list)) {
                for (var i = 0; i < list.length; i++) {
                    listHtml += '<li tapmode onclick="choose(' + list[i].id + ',\'' + list[i].title + '\')">' +
                        '            <div class="c-666 f30 line_center"><div class="hz-img mr20"><img src="' + ajaxUrl + list[i].icon_path + '"/></div>' + list[i].title + '</div>' +
                        '            <div class="mt15 c-999">' + list[i].content + '</div>' +
                        '        </li>'
                }
                if(page == 1){
                    $(".hz_list").html(listHtml);
                }else {
                    $(".hz_list").append(listHtml);
                }
                page++;
                pullFlag = true;

            }else {
                if(page == 1){
                    $(".hz_list").html(noData);
                }else {
                    $(".hz_list").append('<p class="t-c c-999 pt20 pb20">没有更多了</p>');
                }
                pullFlag = false;
            }
            pop.close();

        }, function (error) {
            $(".hz_list").html(noData);
            pop.close();
        })
    }

    function choose(id, title) {
        api.sendEvent({
            name: 'hz_choose',
            extra: {
                id: id,
                title: title,
            }
        });
        comeBack();
    }
</script>
